<template>
	<view class="layout">
		<u-sticky :enable="true" @fixed="totops()" @unfixed="notops()" :offset-top="topNum" v-if="showTab">
			<view class="sticky-container">
				<u-tabs-swiper
					ref="uTabs"
					height="80"
					activeColor="#f29100"
					:list="tabs"
					:current="current"
					@change="tabsChange"
					:is-scroll="true"
				></u-tabs-swiper>
			</view>
		</u-sticky>

		<swiper
			class="bg"
			:current="swiperCurrent"
			@transition="transition"
			@animationfinish="animationfinish"
			@change="handleSwiperChange"
		>
			<swiper-item class="swiper-item" v-for="(item, index) in tabs" :key="item.id">
				<scroll-view
					class="list-scroll-content"
					:scroll-y="isScrollY"
					@scrolltolower="handleReachBottom"
					@scroll="handleViewScroll"
					:show-scrollbar="false"
				>
					<u-empty
						style="height: auto; padding-top: 150rpx"
						v-if="!goodsList.length && status == 'nomore' && index == current"
						text="暂无商品信息"
					></u-empty>
					<goodsTemplate
						:type="'twoColumns'"
						v-if="goodsList.length && index == current"
						:res="goodsList"
						:storeName="false"
					/>
					<u-loadmore
						v-if="index == current && goodsList.length != 0"
						:status="status"
						bgColor="transparent"
						:load-text="loadText"
					/>
				</scroll-view>
			</swiper-item>
		</swiper>
	</view>
</template>

<script>
import { getGoodsList } from "@/api/goods.js";
import goodsTemplate from "@/components/m-goods-list/list";
import { getStoreListByType, getStoreSaletype } from "@/api/store";
export default {
	title: "首页商品",
	components: {
		goodsTemplate
	},
	data() {
		return {
			// #ifndef H5
			topNum: (750 * (uni.getSystemInfoSync().statusBarHeight + 44)) / uni.getSystemInfoSync().screenWidth,
			// #endif
			// #ifdef H5
			topNum: 0,
			// #endif
			/**是否固定到顶部 */
			isFixedTop: false,
			/**scroll-view竖向是否可滚动 */
			isScrollY: false,
			/**是否是切换分类触发的滚动 */
			isChangeType: false,
			tabs: [],
			showTab: false,
			goodsList: [],
			// 因为内部的滑动机制限制，请将tabs组件和swiper组件的current用不同变量赋值
			current: 0, // tabs组件的current值，表示当前活动的tab选项
			swiperCurrent: 0, // swiper组件的current值，表示当前那个swiper-item是活动的
			status: "loadmore",
			loadText: {
				loadmore: "轻轻上拉",
				loading: "努力加载中",
				nomore: "实在没有了"
			},
			params: {
				pageNumber: 1,
				pageSize: 10,
				keyword: "",
				categoryId: "",
				storeId: "",
				/**默认为推荐热门商品 */
				recommend: true
			}
		};
	},
	mounted() {
		this.getType();
		//监听页面发出的触底事件
		// uni.$on("customReachBottom", (arg) => {
		// 	console.log(arg);
		// });
	},
	methods: {
		/**
		 * 组件吸顶时触发
		 */
		totops() {
			// console.log("组件吸顶时触发");
			this.isScrollY = true;
			this.isFixedTop = true;
		},
		/**
		 * 组件取消吸顶时触发
		 */
		notops() {
			// console.log("组件取消吸顶时触发");
			this.isScrollY = false;
			this.isFixedTop = false;
		},
		/**
		 * 获取商品数据
		 * @param flag 是否是从新加载
		 * @param bottom 是否是滚动到底部加载
		 */
		async getGoodsData(flag = false, bottom = false) {
			if (this.status == "nomore" || this.status == "loading") {
				return;
			}
			this.status = "loading";
			this.params.marketId = JSON.parse(uni.getStorageSync("nowMarket")).value;
			let goodsList = await getGoodsList(this.params);
			if (goodsList.data.success) {
				this.status = "loadmore";
				if (flag) {
					this.goodsList = [];
				}
				if (goodsList.data.result.records.length < this.params.pageSize) {
					this.status = "nomore";
				}
				this.goodsList.push(...goodsList.data.result.records);
			}
			// #ifdef APP-PLUS
			if (plus.os.name == "iOS") {
				if (bottom) {
					this.isScrollY = true;
				}
			}
			// #endif
		},
		/**
		 * 获取经营范围
		 */
		getType() {
			getStoreSaletype().then((res) => {
				if (res.data.success) {
					const list = res.data.result.map((item) => {
						return { name: item.name, id: item.id };
					});
					this.tabs = [
						{
							id: "",
							name: "热门"
						},
						...list
					];
					this.getGoodsData(true);
				} else {
					this.tabs = [
						{
							id: "",
							name: "热门"
						}
					];
				}
				setTimeout(() => {
					this.showTab = true;
				}, 300);
			});
		},
		/**
		 * tabs通知swiper切换
		 * @param {Object} index
		 */
		tabsChange(index) {
			this.swiperCurrent = index;
		},
		/**
		 * swiper-item左右移动，通知tabs的滑块跟随移动
		 * @param {Object} e
		 */
		transition(e) {
			// console.log("transition:", e);
			let dx = e.detail.dx;
			this.$refs.uTabs.setDx(dx);
		},
		/**
		 * 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
		 * swiper滑动结束，分别设置tabs和swiper的状态
		 * @param {Object} e
		 */
		animationfinish(e) {
			// console.log("animationfinish", e);
			if (e.detail.current == this.current) {
				return;
			}
			this.goodsList = [];
			this.status = "loadmore";
			let current = e.detail.current;
			this.params.categoryId = this.tabs[current].id;
			if (current === 0) {
				//第一个为热门  需要加recommend参数为true
				this.params.recommend = true;
			} else {
				delete this.params.recommend;
			}
			this.$refs.uTabs.setFinishCurrent(current);
			this.swiperCurrent = current;
			this.current = current;
			this.params.pageNumber = 1;
			this.params.pageSize = 10;
			this.getGoodsData(true);
		},
		/**
		 * @param {Object} e
		 */
		handleSwiperChange(e) {
			// console.log("handleSwiperChange:", e);
			// #ifdef APP-PLUS
			if (plus.os.name == "iOS") {
				this.isChangeType = true;
			}
			// #endif
		},
		/**
		 * scroll-view滚动事件
		 * @param 事件源
		 */
		handleViewScroll(e) {
			// console.log("滚动触发", e);
			// #ifdef APP-PLUS
			if (plus.os.name == "iOS") {
				if (e.detail.scrollTop === 0) {
					if (this.isChangeType) {
						this.isChangeType = false;
						this.isScrollY = this.isFixedTop;
					} else {
						this.isScrollY = false;
						// 处理临界点问题，如果1.8s过后，没有操作恢复可滚动行为
						setTimeout(() => {
							if (this.isFixedTop) {
								this.isScrollY = true;
							}
						}, 600);
					}
				} else {
					this.isScrollY = true;
				}
			}
			// #endif
		},
		/**
		 * scroll-view到底部加载更多
		 */
		handleReachBottom() {
			// console.log("滚动到底部");
			if (this.status == "nomore" || this.status == "loading") {
				return;
			}
			// #ifdef APP-PLUS
			if (plus.os.name == "iOS") {
				this.isScrollY = false;
			}
			// #endif
			this.params.pageNumber++;
			this.getGoodsData(false, true);
		}
	}
};
</script>
<style lang="scss" scoped>
/**去除scroll-view的滚动条*/
::-webkit-scrollbar {
	display: none;
	width: 0 !important;
	height: 0 !important;
	-webkit-appearance: none;
	background: transparent;
}
.layout {
	width: 100%;
	padding: 0;
	background: #fff;
	::v-deep .goods-list {
		margin-bottom: 16rpx !important;
	}
}
.bg {
	background-color: #f9f9f9;
	height: calc(100vh - 40px);
	// #ifdef H5
	height: calc(100vh - 84px);
	// #endif
}
.list-scroll-content {
	height: 100%;
}
.sticky-container {
	width: 100%;
	height: 80rpx;
	background-color: #ffffff;
}
</style>